<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { useUser, useDelUser } from '@/api/systemUser/index';
import type { ITableOptions } from '@/components/appTable/type';
import type { IUserParams, IUserInfo, IUserListInfo } from '@/api/systemUser/type';
import type { IFormValue } from '../form/type';
import { handleMessage } from '@/utils/globalEvent';

const emits = defineEmits(['handleEdit', 'handleSearch']);
// 请求数据传值
const params = reactive<IUserParams>({
	limit: 20,
	offset: 1,
	role: '',
});
// 表格
const AppTable = defineAsyncComponent(() => import('@/components/appTable/index.vue'));
// 表格loading
const loading = ref(true);
// 分页显示页数
const currentPage = ref(1);
// 表格配置项
const options: ITableOptions[] = [
	{
		prop: 'name',
		label: '用户名',
		align: 'center',
	},
	{
		prop: 'password',
		label: '登录密码',
		align: 'center',
	},
	{
		prop: 'role',
		label: '角色',
		align: 'center',
	},
	{
		prop: 'avatarUrl',
		label: '头像',
		align: 'center',
		slot: 'avatarUrl',
	},
	{
		prop: 'createTime',
		label: '创建时间',
		align: 'center',
		slot: 'createTime',
	},
	{
		prop: 'updateTime',
		label: '更新时间',
		align: 'center',
		slot: 'updateTime',
	},
	{
		label: '操作',
		action: true,
		align: 'center',
	},
];
// 表格值
const tableValue = ref<IUserInfo>({
	list: [],
	total: 0,
});

// 获取用户
const postUser = async () => {
	if (!loading.value) loading.value = true;
	try {
		const data = await useUser(params);
		if (!data) return;
		tableValue.value = data;
		currentPage.value = params.offset;
	} catch (error) {
		throw new Error('获取用户列表未知异常,请联系开发人员');
	} finally {
		loading.value = false;
	}
};
postUser();
// 分页发生改变
const handlePageChange = (num: number) => {
	params.offset = num;
	postUser();
};
// 显示页数发生改变
const handlePageSize = (num: number) => {
	params.limit = num;
	postUser();
};
// 点击查询
const handleSearch = (data: IFormValue) => {
	const { role } = data;
	params.role = role;
	postUser();
};
// 点击编辑
const clickEdit = (val: IUserListInfo) => {
	emits('handleEdit', val);
};
// 点击删除
const handleDel = async (id: number) => {
	try {
		const result = await useDelUser({ id });
		if (!result) return;
		handleMessage(result);
		emits('handleSearch', { role: '' });
	} catch (error) {
		throw new Error('删除用户未知异常,请联系开发人员');
	}
};

defineExpose({
	handleSearch,
});
</script>

<template>
	<div class="user-table">
		<AppTable
			:options="options"
			:value="tableValue.list"
			:loading="loading"
			:total="tableValue.total"
			:current-page="currentPage"
			border
			pagination
			@handlePageChange="handlePageChange"
			@handlePageSize="handlePageSize"
		>
			<template #avatarUrl="{ scope }">
				<img class="avatarurl" :src="scope.row.avatarUrl" />
			</template>
			<template #createTime="{ scope }">
				{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
			</template>
			<template #updateTime="{ scope }">
				{{ dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
			</template>
			<template #action="{ scope }">
				<span :class="!scope.row.edit && 'prohibit'">
					<span @click="clickEdit(scope.row)">编辑</span>
				</span>
				<span :class="!scope.row.edit && 'prohibit'">
					<span @click="handleDel(scope.row.id)">删除</span>
				</span>
			</template>
		</AppTable>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
